/* eslint-disable no-unused-vars */
/**
 * @description: 登录界面
 * @author: Daniel
 * @update: 2022/1/10
 */
import React, { Component } from 'react'
import { LoginTitle } from '@/components'
import clsx from 'clsx'
import {
  TextField,
  Grid,
  OutlinedInput,
  InputLabel,
  InputAdornment,
  IconButton,
  Button,
  FormControl,
  FormHelperText,
  Snackbar,
} from '@material-ui/core'
import { Visibility, VisibilityOff } from '@material-ui/icons'
import { withStyles } from '@material-ui/core/styles'
import { captchaImage, login } from '@/apis/Home'
import MuiAlert from '@material-ui/lab/Alert'

import styles from './styles.module.less'

function Alert(props) {
  return <MuiAlert elevation={6} variant='filled' {...props} />
}

const style = {
  outlined: {
    width: '100%',
    margin: '10px 0',
  },
  form_code: {
    width: '80px',
    height: '100%',
    cursor: 'pointer',
  },
}

@withStyles(style)
class Login extends Component {
  state = {
    account: 'admin', //账号
    password: 'admin123', //密码
    code: '', //验证码
    codeImg: '',
    uuid: '', //验证码ID
    showPassword: false, // 展示密码
    snackbar: {
      //提示
      open: false,
      name: '演示模式，不允许操作',
      type: '',
    },
  }

  componentDidMount() {
    this.info()
  }

  /**
   * @name: 获取验证码
   */
  info = async () => {
    window.localStorage.setItem('token', '')
    const res = await captchaImage()
    if (res) {
      const { uuid, img } = res
      this.setState({ codeImg: img, uuid })
    }
  }

  /**
   * @name: 跳转首页
   */
  handleSubmit = async (e) => {
    e.preventDefault()
    const { account, password, uuid, code } = this.state
    const params = {
      username: account,
      password: password,
      code: code,
      uuid: uuid,
    }
    const { type, token, msg } = await login(params)
    if (type) {
      window.localStorage.setItem('token', token)
      this.props.history.push('/home')
    } else {
      this.setState({ snackbar: { open: true, name: msg, type: 'warning' } })
    }
  }

  /**
   * @description: 修改密码
   */
  handleClickShowPassword = () => {
    const { showPassword } = this.state
    this.setState({ ...this.state, showPassword: !showPassword })
  }

  handleMouseDownPassword = (event) => {
    event.preventDefault()
  }

  /**
   * @description: 关闭提示
   */
  onSnackbarClose = () => {
    this.setState({ snackbar: { open: false, name: '', type: '' } })
  }

  render() {
    const { account, password, code, showPassword, codeImg, snackbar } = this.state

    return (
      <div className={styles.container}>
        <div className={styles.main}>
          <div className={styles.main_row}>
            <div className={styles.main_col_7}>
              <LoginTitle />
              <ul className={styles.m_b}>
                <li>
                  <i className={styles.fa}>{/* <Icon type='right-circle' /> */}</i>
                  SpringBoot
                </li>
                <li>
                  <i className={styles.fa}>{/* <Icon type='right-circle' /> */}</i>
                  Mybatis
                </li>
                <li>
                  <i className={styles.fa}>{/* <Icon type='right-circle' /> */}</i>
                  Shiro
                </li>
                <li>
                  <i className={styles.fa}>{/* <Icon type='right-circle' /> */}</i>
                  Thymeleaf
                </li>
                <li>
                  <i className={styles.fa}>{/* <Icon type='right-circle' /> */}</i>
                  Bootstrap
                </li>
              </ul>
            </div>
            <div className={styles.main_col_5}>
              <div className={styles.main_title}>
                <LoginTitle />
              </div>
              <div className={styles.form}>
                <h4 className={styles.no_margins}>登录：</h4>
                <p>你若不离不弃，我必生死相依</p>
                <FormControl className={this.props.classes.outlined} size='small' error={!account} variant='outlined'>
                  <InputLabel htmlFor='outlined-adornment-account'>用户名*</InputLabel>
                  <OutlinedInput
                    id='outlined-adornment-account'
                    value={account}
                    onChange={(event) => this.setState({ account: event.target.value })}
                    aria-describedby='outlined-weight-helper-text'
                    // inputProps={{
                    //   'aria-label': '请输入您的用户名',
                    // }}
                    type='search'
                    labelWidth={70}
                  />
                  {account ? null : <FormHelperText id='outlined-weight-helper-text'>请输入您的用户名</FormHelperText>}
                </FormControl>

                <FormControl className={this.props.classes.outlined} size='small' error={!password} variant='outlined'>
                  <InputLabel htmlFor='outlined-adornment-password'>密码*</InputLabel>
                  <OutlinedInput
                    id='outlined-adornment-password'
                    type={showPassword ? 'text' : 'password'}
                    value={password}
                    onChange={(event) => this.setState({ password: event.target.value })}
                    endAdornment={
                      <InputAdornment position='end'>
                        <IconButton
                          aria-label='toggle password visibility'
                          onClick={this.handleClickShowPassword}
                          onMouseDown={this.handleMouseDownPassword}
                          edge='end'
                        >
                          {showPassword ? <Visibility /> : <VisibilityOff />}
                        </IconButton>
                      </InputAdornment>
                    }
                    labelWidth={70}
                  />
                  {password ? null : <FormHelperText id='outlined-weight-helper-text'>请输入您的密码</FormHelperText>}
                </FormControl>

                <Grid
                  container
                  className={this.props.classes.outlined}
                  direction='row'
                  justifyContent='space-between'
                  alignItems='center'
                >
                  <Grid item xs={7}>
                    <form noValidate autoComplete='off'>
                      <TextField
                        id='outlined-search'
                        value={code}
                        onChange={(e) => this.setState({ code: e.target.value })}
                        size='small'
                        label=''
                        type='search'
                        variant='outlined'
                      />
                    </form>
                  </Grid>

                  <Grid item>
                    <img
                      className={this.props.classes.form_code}
                      onClick={this.info}
                      src={'data:image/gif;base64,' + codeImg}
                      alt=''
                    />
                  </Grid>
                </Grid>
                <Button
                  variant='contained'
                  size='medium'
                  color='primary'
                  className={this.props.classes.outlined}
                  onClick={this.handleSubmit}
                >
                  登录
                </Button>
              </div>
            </div>
          </div>
          <div className={styles.main_footer}>
            <div>{`
                Copyright © 2018-2021 ruoyi.vip All Rights Reserved. `}</div>
          </div>
        </div>
        <Snackbar
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
          open={snackbar.open}
          autoHideDuration={2000}
          onClose={this.onSnackbarClose}
        >
          <Alert onClose={this.onSnackbarClose} severity={snackbar.type}>
            {snackbar.name}
          </Alert>
        </Snackbar>
      </div>
    )
  }
}

export default Login
